/**
 * Created by lee_mxue on 17/5/4.
 */

import React, {PropTypes} from "react";
require('./SendOffCard.less')

class SendOffCard extends React.Component {
    static propTypes = {
        order_id: PropTypes.number,
        title: PropTypes.string,
        express_company: PropTypes.string,
        express_number: PropTypes.string,
        wait_time: PropTypes.string,
        label_name: PropTypes.string,
        label_number: PropTypes.string,
        type: PropTypes.string,
        receive_time: PropTypes.string,
    }
    static defaultProps = {
        type: "",
        flag_type: "",
        btn_type: "",
        order: "",
        from_city: "",
        to_city: "",
        from_name: "",
        to_name: "",
        log_info: "",
        log_time: "",
    }
    //寄件 example
    static delivery_card = {
        flag_type: "AlreadyCancel",
        btn_type: "DeleteRecord",
        order: "123",
        from_city: "北京市",
        to_city: "上海市",
        from_name: "张先生",
        to_name: "李先生",
        log_info: "用户已完成支付，快递揽收完成",
        log_time: "2016-12-14 17:54:00"
    }
    //详情寄件
    static delivery_detail_card = {
        type: "DETAIL",
        flag_type: "AlreadyCancel",
        btn_type: "DeleteRecord",
        order: "123",
        from_city: "北京市",
        to_city: "上海市",
        from_name: "张先生",
        to_name: "李先生",
        log_info: "用户已完成支付，快递揽收完成",
        log_time: "2016-12-14 17:54:00"
    }

    constructor(props) {
        super(props)
        this.state = {
            FLAG: {
                "AlreadyOrder": "已下单",
                "WaitPay": "待支付",
                "AlreadyStart": "已揽收",
                "OnDistributing": "配送中",
                "AlreadySign": "已签收",
                "AlreadyCancel": "已取消",
            },
            BTN: {
                "PutIn": "快件投放",
                "GetBack": "快递取回",
                "CancelOrder": "取消订单",
                "Pay": "支付",
                "Evalute": "评价",
                "ViewEvalute": "查看评价",
                "DeleteRecord": "删除记录"
            }
        }
    }

    detailContent() {
        const data = this.props.dataSource
        return (
            <div className="delivery-card__content_order detail flex">
                <div className="delivery-card__content_order_from flex1">

                    <div className="name">
                        {data.from_city}({data.from_name})
                    </div>
                </div>
                <div className="delivery-card__content_order_status">
                    <div className="icon-right">
                        >>
                    </div>
                </div>
                <div className="delivery-card__content_order_from flex1">
                    <div className="name">
                        {data.to_city}({data.to_name})
                    </div>
                </div>
            </div>
        )
    }

    render() {
        const data = this.props.dataSource
        const my_flag = data.flag_type
        const my_btn = data.btn_type
        let flag_class, btn_class
        const card_content = this.detailContent()
        //
        if (my_flag === "AlreadyOrder" || my_flag === "WaitPay"
            || my_flag === "AlreadyStart" || my_flag === "OnDistributing") {
            flag_class = "flag-blue"
        } else if (my_flag === "AlreadySign") {
            flag_class = "flag-green"
        } else {
            flag_class = "flag-grey"
        }
        //按钮
        if (my_btn === "CancelOrder" || my_btn === "DeleteRecord") {
            btn_class = "btn-grey"
        } else if (my_btn === "Pay" || my_btn === "PutIn") {
            btn_class = "btn-pay"
        } else if (my_btn === "Evalute" || my_btn === "GetBack") {
            btn_class = "btn-evalute"
        } else if (my_btn === "ViewEvalute") {
            btn_class = "btn-evalute"
        }

        return (
            <div className="delivery-card borderT" onClick={this.props.onClick}>
                <div className="delivery-card__title">
                    <div className={`delivery-card__title_icon ${flag_class}`}>
                        国内
                        <span className="icon"></span>
                    </div>
                    <div className="delivery-card__title_order flex">
                        <div className="label label-colon">订单号</div>
                        <div className="flex1"> {data.order_num}</div>
                        <div className="span">{data.send_type_desc}</div>
                    </div>
                </div>
                <div className="delivery-card__track flex">
                    {
                        data.status_list.map(item => {
                            return (
                                item.is_done == 1 ? <span className="flex1 textBlue"
                                                          style={{"borderColor": "#50b9fc"}}>{item.name}</span> :
                                    <span className="flex1 textBlue">{item.name}</span>
                            )
                        })
                    }
                </div>
                <div className="delivery-card__content">
                    {card_content}
                </div>
                {data.info_tips &&
                <div className="delivery-card__operation flex">
                    {   data.icon_show
                        ? <div className="delivery-card__operation_log flex1 delivery_detail_card">
                            <div className="info">
                                <div className="log">
                                    {data.log_info}
                                </div>
                                <div className="time">
                                    {data.log_time}
                                </div>
                            </div>
                            <div className="icon">
                                <i className="iconfont icon-jiantou1"></i>
                            </div>
                        </div>
                     : <div className="delivery-card__operation_log flex1">
                            <div className="log">
                                {data.log_info}
                            </div>
                            <div className="time">
                                {data.log_time}
                            </div>
                        </div>
                    }
                    
                    {data.btn_show &&
                    <div className={`delivery-card__operation_oper ${btn_class}`}>
                        {this.state.BTN[my_btn]}
                    </div>}

                </div>}
            </div>
        )
    }
}

module.exports = SendOffCard